<template>
    <div class="searchCon clearfix">
        <a @click="toMainPage" class="login_logo"><img src="@/assets/images/logo02.png"></a>	
        <div class="searchForm fl">
            <form>
                <input type="text" class="searchInput" placeholder="搜索商品" v-model="queryString">
                <input type="button" class="searchButton" value="搜索" @click="searchGoodsName">
            </form>
        </div>
        <div class="goods_count fr">{{ goods_count }}</div>
        <button class="myShoppingCarButton" @click="goToMyShoppingCar">我的购物车</button>
    </div>    
</template>

<script>

export default {
    name: "SearchBar",
    data(){
        return{
            "queryString":'',
        }
    },
    props:{
        goods_count:{
            type: Number,
            default:0
        }
    },
    methods:{
        toMainPage(){
            this.$emit('gotoMainPage');
        },
        searchGoodsName:function() {
            this.$emit('searchGoods',this.queryString);
        },
        goToMyShoppingCar(){
            this.$emit('gotoMyShoppingCar');
        }
    }
}
</script>

<style>
.searchCon{
    margin-left: 230px;
    margin-right: 250px;
    font-family:'Microsoft Yahei';
    font-size:12px;
    color:#666;
    height:120px;
}

.login_logo{
    float: left;
    margin-top:30px;
    cursor: pointer;
}
.login_logo img{
    height:60px;
    width: 150px;
}

.searchForm{
    height:38px;
    margin-left: 5%;
    margin-top:41px;
    border:1px solid #37ab40;
    position: relative;
    width:55%;
    background:url(../../assets/images/icons.png) 10px -338px no-repeat;
}
.searchForm .searchInput{
    position: relative;
    height:34px;
    width:70%;
    border:0px;
    outline: none;
    color:#737272;
    float: left;
    margin-left: 35px;
    margin-top: 2px;
}

.searchForm .searchButton{
    width:20%;
    height:38px;
    outline: none;
    border:0px;
    color:white;
    font-size: 14px;
    font-weight: bold;
    background-color:#37ab40;
    font-family:'Microsoft Yahei';
    cursor:pointer;
    float:right;
}

.myShoppingCarButton{
    border:1px solid #dddddd;
    margin-left: 50px;
    margin-top: 41px;
    height:38px;
    width:150px;
    padding-left: 40px;
    color:#37ab40;
    background-color: white;
    cursor:pointer;
    background:url(../../assets/images/icons.png) 10px -300px no-repeat;
    float:right;
    position: relative;
}
.goods_count{
    height:38px;
    width: 38px;
    margin-top: 41px;
    font-weight: bold;
    font-size:18px;
    background-color: #ff8800;
    text-align: center;
    line-height: 40px;
    color: #fff;
}
</style>